<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>
    <div class="main">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="收货人"
            label="收货人"
            placeholder="收货人"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="phone"
            type="text"
            name="手机号"
            label="手机号"
            placeholder="手机号"
          />
          <van-field
            v-model="myAddress"
            type="text"
            name="所在地址"
            label="所在地址"
            placeholder="所在地址"
            @click="btnClick"
            disabled
          />
          <div class="div_center">
            <span class="span1">详细地址</span>
            <textarea
              class="textarea"
              name=""
              id=""
              cols="30"
              rows="10"
              v-model="address_detail"
            ></textarea>
          </div>
        </van-cell-group>
      </van-form>
    </div>
    <div class="he"></div>
    <div class="main_bottom">
      <div>
        <span>标签</span>
        <input class="inp1" checked type="radio" name="address" v-model="lab" value="家"/>家
        <input type="radio" name="address" v-model="lab" value="公司"/>公司
        <input type="radio" name="address" v-model="lab" value="学校" />学校
      </div>
      <div>
        <span>设置默认地址</span>
        <span>
          <input type="checkbox" name="" id="" v-model="status_active">
        </span>
      </div>
      <div>提醒：每次下单会默认推荐该地址</div>
      <div @click="address_save">保存并使用</div>
      <div>重置</div>
    </div>

    <!-- 省市选择 -->
    
    <div class="sheng" v-show="active">
       <van-area 
       title="标题" 
       :area-list="areaList"
       @confirm="confirm"
       @cancel="cancel"
       v-model="addressData"
       value=""
         />
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import {getaddressadd} from '@/request/api.js'
import {Toast} from 'vant'

export default {
  data() {
    return {
      username: "",
      phone: "",
      myAddress: "",
      areaList,
      active:false,
      addressData:'',
      address_code:'',
      status_active:true,
      address_detail:"",
      lab:"",

    };
  },
  methods:{
      btnClick(){
          this.active=true
      },
      confirm(e){
        let str = e[0].name + e[1].name+e[2].name
        this.myAddress = str
        console.log(e);
        this.address_code= e[2].code
        this.active=false
      },
      cancel(){
        this.active=false
      },
      async address_save(){
        let user = JSON.parse(localStorage.user)
        console.log("user",user);
        let obj = {
          uid:user.uid,
          username:this.username,
          userphone:this.phone,
          regioncode:this.address_code,
          location:this.myAddress,
          useraddress:this.address_detail,
          status:this.status_active ? 1:0,
          lable:this.lab,
        }
        console.log(obj,'obj');

        let getaddressaddRes = await getaddressadd(obj)
        console.log(getaddressaddRes,'getaddressadd');
        if(getaddressaddRes.data.code == 200){
          Toast.success(getaddressaddRes.data.msg)
        }

      }

      
  }
};
</script>

<style lang="less" scoped>
.div_center {
  box-sizing: border-box;
  margin-top: 0.25rem;
  height: 15vh;
  width: 100vw;
  position: relative;
  .span1 {
    display: inline-block;
    width: 20vw;
    height: 15vh;
    line-height: 15vh;
    position: absolute;
    margin-left: 0.15rem;
    color: #666;
  }
  .textarea {
    width: 60vw;
    height: 13vh;
    margin-left: 1.1rem;
    background-color: #ccc6;
    border: none;
    outline: none;
  }
}
.he {
  height: 0.1rem;
  width: 100vw;
  background-color: #ccc;
}

//
.main_bottom {
  box-sizing: border-box;
  width: 100vw;
  padding: 0.15rem;
  height: 30vh;
  div {
    &:nth-child(1) {
      span {
        font-weight: 600;
        margin-right: 0.5rem;
      }
      .inp1 {
        &:nth-child(1) {
        }
      }
    }
    &:nth-child(2) {
      margin-top: 0.5rem;
      span {
        &:nth-child(1) {
            font-size: .14rem;
            font-weight: 600;
        }
        &:nth-child(2)>input {
          float: right;
          width: .2rem;
          height: 0.2rem;
        }
      }
    }
    &:nth-child(3){
        margin-top: .1rem;
        font-weight: 600;
        font-size: .14rem;
        color: #666;
    }
    &:nth-child(4){
        width: 100%;
        height: 0.6rem;
        margin-top: .3rem;
        background-color: #f00;
        border-radius: .1rem;
        color: white;
        line-height: .6rem;
        font-size: .25rem;
        text-align: center;
        position: fixed;
        bottom: .7rem;
        left: 0;
    }
    &:nth-child(5){
        width: 100%;
        height: 0.6rem;
        background-color: #ccc6;
        border-radius: .1rem;
        line-height: .6rem;
        font-size: .25rem;
        text-align: center;
        position: fixed;
        bottom: .1rem;
        left: 0rem;
        
    }
  }
}

.van-picker-column{
    height: 1rem;
}
.sheng{
    width: 100vw;
    position: fixed;
    bottom: 0;
}
</style>